<template>
  <el-dialog
    v-model="dialogVisibleCharging"
    title="计费管理"
    width="500px"
    class="charging-box-dialog"
    :before-close="chargingCancelFUnc"
  >
    <div class="charging-box">
      <el-form
        :model="chargingForm"
        label-width="140px"
        label-position="left"
        style="max-width: 600px"
      >
        <el-form-item label="区域">
          <el-cascader
            class="charging-input-box"
            v-model="chargingForm.value"
            :options="options"
            :placeholder="' '"
            clearable 
          />
        </el-form-item>
        <el-form-item label="每日封顶金额">
          <el-input
            class="charging-input-box"
            v-model="chargingForm.input"
            placeholder=""
            v-inputLimt="2"
            clearable 
          />
          <span class="charging-span">元</span>
        </el-form-item>
        <el-form-item label="收费单价">
          <el-input
            class="charging-input-box"
            v-model="chargingForm.input"
            placeholder=""
            v-inputLimt="2"
            clearable 
          />
          <span class="charging-span">元</span>
        </el-form-item>
        <el-form-item label="每收费单价时长">
          <el-input
            class="charging-input-box"
            v-model="chargingForm.input"
            placeholder=""
            v-inputLimt="0"
            clearable 
          />
          <span class="charging-span">分钟</span>
        </el-form-item>
        <el-form-item label="免费时长">
          <el-input
            class="charging-input-box"
            v-model="chargingForm.input"
            placeholder=""
            v-inputLimt="0"
            clearable 
          />
          <span class="charging-span">分钟</span>
        </el-form-item>
        <el-form-item label="更新时间">
          <span class="charging-span">2024.09.08 12:34:44</span>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button class="charging-btn-cancel" @click="chargingCancelFUnc">
          取消
        </el-button>
        <el-button
          class="charging-btn"
          type="primary"
          @click="chargingSubmitFUnc"
        >
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
import {
  computed,
  watch,
  onMounted,
  getCurrentInstance,
  ref,
  defineEmits,
  nextTick,
} from 'vue'
const { proxy: that } = getCurrentInstance()
const props = defineProps({
  show: {
    type: Boolean,
    default: () => {
      return false
    },
  },
  tableData: {
    type: Array,
    default: () => {
      return []
    },
  },
})
const options = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency',
          },
          {
            value: 'feedback',
            label: 'Feedback',
          },
          {
            value: 'efficiency',
            label: 'Efficiency',
          },
          {
            value: 'controllability',
            label: 'Controllability',
          },
        ],
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation',
          },
          {
            value: 'top nav',
            label: 'Top Navigation',
          },
        ],
      },
    ],
  },
]
let dialogVisibleCharging = ref(false)
let chargingForm = ref({
  input: '',
})
watch(
  () => props.show,
  (newValue, oldValue) => {
    dialogVisibleCharging.value = props.show
  }
)
const emit = defineEmits(['onClose'])
const chargingCancelFUnc = () => {
  emit('onClose', false)
}
const chargingSubmitFUnc = () => {}
</script>
<style lang="scss">
@import './store_dislog.scss';
</style>